<template>
  <div>
    <el-table stripe
              :data="fdata"
              class="part-apply-form-batch-out-table"
    >
      <el-table-column v-for="column in columns" :key="column.field" :fdate='fdata'
                       v-if="column.show"
                       :label="column.label"
                       :width="column.width"
                       :fixed="column.fixed"
                       :align="column.align"
                       :render-header="column.renderHeader"
                       show-overflow-tooltip>

        <template slot-scope="scope">
          <template v-if="column.field == 'propserName'">
            <template>{{scope.row.propserName}}</template>
          </template> 
          <template v-else-if="column.field == 'type'">
            <template>{{scope.row && scope.row.type}}</template>
          </template>
          <template v-else-if="column.field == 'propserTime'">
            <template>{{scope.row.propserTime}}</template>
          </template>
          <template v-else-if="column.field == 'name'">
            <template v-if="scope.row.sparepartRepertory">{{scope.row.sparepartRepertory.sparepart&&scope.row.sparepartRepertory.sparepart.name}}</template>
          </template>
          <template v-else-if="column.field == 'serialNumber'">
            <template v-if="scope.row.sparepartRepertory">{{scope.row.sparepartRepertory.sparepart&&scope.row.sparepartRepertory.sparepart.serialNumber}}</template>
          </template>
          <template v-else-if="column.field == 'sparepart.type'">
            <template v-if="scope.row.sparepartRepertory">{{scope.row.sparepartRepertory.sparepart&&scope.row.sparepartRepertory.sparepart.type}}</template>
          </template>
          <template v-else-if="column.field == 'sparepart.standard'">
            <template v-if="scope.row.sparepartRepertory">{{scope.row.sparepartRepertory.sparepart&&scope.row.sparepartRepertory.sparepart.standard}}</template>
          </template>
          <template v-else-if="column.field == 'repertory'">
            <template v-if="scope.row.sparepartRepertory">{{scope.row.sparepartRepertory.repertory&&scope.row.sparepartRepertory.repertory.name}}</template>
          </template>
          <template v-else-if="column.field == 'repertoryCount'">
            <template v-if="scope.row.sparepartRepertory">
              {{scope.row.sparepartRepertory&&scope.row.sparepartRepertory.repertoryCount}}

              <el-tooltip class="item" effect="dark" :content="`安全库存：${scope.row.sparepartRepertory.safetyStock}`" placement="top">
                <el-tag size="mini" type="danger" style="float: right"
                        v-if="scope.row.sparepartRepertory.safetyStock && (scope.row.sparepartRepertory.safetyStock > scope.row.sparepartRepertory.repertoryCount)"
                >库存提醒</el-tag>
              </el-tooltip>
            </template>
          </template>

          <div v-else-if="column.field == 'holdCount' && scope.row.sparepartRepertory" style="text-align: center">
            {{scope.row.holdCount}}/{{scope.row.holdCountSum || 0}}
          </div>
          <template v-else-if="column.field == 'variation'">
            {{variationNum(scope.row.variation, scope.row.solvedVariation)}}
          </template>
          <template v-else-if="column.field == 'passnumber'" slot-scope="scope">
            <el-input v-model="scope.row.number" type="number" step="any" :min="0" :max="variationNum(scope.row.variation, scope.row.solvedVariation)"></el-input>
          </template>
          <template v-else-if="column.field == 'enable'" slot-scope="scope">
            <template v-if="scope.row.state == 'solved'">
              <el-button type="text" size="small" class="no-padding" style="color:#333;cursor: text;">{{ $t('common.form.preview.stock.status.solved') }}</el-button>
            </template>
            <template v-if="scope.row.state == 'suspending'">
              <template v-if="scope.row.type == '申领' ">
                <el-button type="text" size="small" class="no-padding" style="color:#333;cursor: text;">{{ $t('common.form.preview.sparepart.outStock') }}</el-button>
              </template>
              <template v-if="scope.row.type == '退回' ">
                <el-button type="text" size="small" class="no-padding" style="color:#333;cursor: text;">{{ $t('common.form.preview.sparepart.inStock') }}</el-button>
              </template>
            </template>
              
          </template>
          <template v-else>
            {{scope.row[column.field]}}
          </template>
        </template>

      </el-table-column>
    </el-table>

    <div class="out-stock-remark">
      <textarea maxlength="500" :placeholder="$t('common.base.tip.inputCommentContent')" v-model="remark"></textarea>
    </div>
  </div>
</template>

<script>
import _ from 'lodash';
import MathUtil from '@src/util/math';
import { t } from '@src/locales'

export default {
  name: 'part-applybatchout-form',
  inject: ['initData'],
  props: {
    formdata: {
      type: Array,
      default: []
    },
    sparepartConfig: {
      type: Object,
      default: {}
    },
  },
  data(){
    return {
      form: {
        type: '申领',
        content: ''
      },
      numberValidateForm: {
        number: ''
      },
      rules: {
        content: [
          {required: true, message: t('common.base.tip.inputCommentContent')},
          {max: 500, message: t('part.components.partRemarkForm.text2', {max:500})}
        ],
        number:[
          { required: true, message: t('part.tips32')}
        ]
      },
      columns: this.buildColumns(),
      fdata: [],
      remark:''
    }
  },
  computed: {
    // TODO: 支持小数 提示
    minNumber () {
      let initData = this.initData;
      return !initData || !initData.precision ? 1 : (initData.precision == 1 ? 0.1 : 0.01);
    },
  },
  methods: {
    async pack(){
      try {
        let obj = this.fdata
        let parms = []
        for(let i = 0; i < obj.length;i++){
          let count = this.decimalNumber(obj[i].number);

          if(obj[i].number > 0){
            if(count != -1){
              if(count == 0) {
                this.$platform.alert(t('part.tips24', {num:0}))
                return
              } 
              this.$platform.alert(t('part.tips25', {num1:0, num2:count}))
              return
              
            } else if(obj[i].number > Number(this.variationNum(obj[i].variation, obj[i].solvedVariation))){
              this.$platform.alert(t('part.tips33'))
              return
            }
            let parm = {}
            parm['id'] = obj[i].id
            parm['solvedVariation'] = obj[i].number
            parm['type'] = obj[i].type
            parm['remark'] = this.remark
            parms.push(parm)
            
          }else{
            let initData = this.initData;
            let msg = initData.precision ? t('part.tips25', {num1:0, num2:initData.precision}) : t('part.tips24', {num:0})
            this.$platform.alert(msg)
            return
          }
        }
        return parms
      } catch (error) {
        console.log(error)
      }

      return null;
    },
    selectOutType(ele){
      let type = ele.target.value;
      this.type = type;
    },
    getUserTotalCount() {
      const userIds = this.fdata.map(d => d.propser);
      const uniqUserIds = _.uniq(userIds);

      this.$http.get('/partV2/approve/getTotalCountByUserIds', { userIds: uniqUserIds.join(',')})
        .then(result => {
          if (result.status !== 0) return;
          const totalCountData = result.data || {};
          const keys = Object.keys(totalCountData) || [];

          this.fdata.forEach(d => {
            if (keys.some(key => key === d.propser)) {
              d.holdCountSum = totalCountData[d.propser];
            }
          })
        })
        .catch(err => {
          console.warn('getUserTotalCount Error', err);
        })
    },
    initData(obj){
      let data = JSON.parse(JSON.stringify(obj));
      return data.map(row => {
        row.number = this.variationNum(row.variation, row.solvedVariation)
        return row;
      });
    },
    buildColumns(){
      return [
        {
          label: t('common.form.preview.relatedPart.approver'),
          field: 'propserName',
          show: true,
          fixed: true,
        },
        {
          label: t('common.part.category'),
          field: 'type',
          show: true,
          width:'50px'
        },
        {
          label: t('task.detail.components.applyTime'),
          field: 'propserTime',
          show: true,
          width:'150px'
        },
        {
          label: t('common.form.preview.sparepart.colum1'),
          field: 'name',
          show: true
        },
        {
          label: t('common.paas.model.sparePartField.sparePartNo'),
          field: 'serialNumber',
          show: true
        },
        {
          label: t('common.label.sparepartType'),
          field: 'sparepart.type',
          show: true
        },
        {
          label: t('common.label.sparepartStandard'),
          field: 'sparepart.standard',
          show: true
        },
        {
          label: t('common.form.preview.stock.lackStockDisplayName.warehouseName'),
          field: 'repertory',
          show: true
        }, {
          label: t('part.field14'),
          width: '120px',
          field: 'repertoryCount',
          show: true
        }, {
          // label: '个人库已有备件',
          field: 'holdCount',
          show: true,
          width: '170px',
          renderHeader: this.renderHeader,
          align: 'center',
        }, {
          label:  t('part.field12'),
          field: 'variation',
          show: true
        },
        {
          label: t('part.field13'),
          field: 'passnumber',
          show: true,
          fixed: 'right',
        },
        {

          label: t('common.label.operate'),
          field: 'enable',
          width: '50px',
          show: true,
          fixed: 'right',
        }
      ]
    },
    decimalNumber(num) {
      let initData = this.initData;
      let count = MathUtil.decimalNumber(num);

      if(initData.precision >= count) return -1;
      return initData.precision;
    },
    variationNum (num1, num2) {
      if(num1 == num2) return num1;
      return this.$math.format(this.$math.subtract(this.$math.bignumber(num1), this.$math.bignumber(num2)))
    },

    renderHeader(h) {
      return (
        <span>
          <el-tooltip class="item" effect="dark" content={t('part.text10')} placement="top">
            <span>{t('part.text11')}<i class="el-icon-question"></i></span>
          </el-tooltip>
        </span>
      )
    }
  },
  mounted(){
    // this.form.type = this.sparepartConfig.outStoreType[0];
    this.fdata = this.initData(this.formdata);
    this.getUserTotalCount();
  },
}
</script>

<style lang="scss">
  .part-apply-form-batch-out-table {
    width: 900px;
  }
.el-form-item{
  margin-bottom: 0
}
.el-form-item__error{
  position: relative;
}
#outType{
  width: 100%;
  height: 34px;
}
.out-stock-remark{
  width:100%;
  display:flex;
  margin:10px 0 0;
  padding:0 5px;
  textarea{
    flex:1;
    height:40px;
    min-height:40px;
    padding:10px;
    border-color:#dadada;
    &:focus{
      outline: none;
      border-color: $color-primary;
    }  
  }   
}
</style>
